<template>
<div class="small iphone_p ai-mei" v-if="data">
          <div class="f1">
            <div class="center">
              <div class="f1-1">
                <div class="box1">
                  <p>{{ data.data[2].data3[0].title }}</p>
                </div>

                <div class="box2">
                  <div
                    class="pro"
                    v-for="data in data.data[2].data3[0].data"
                    :key="data.id"
                  >
                    <div>
                      <img :src="data.img" />
                    </div>
                    <div class="text">
                      <div>
                        <img :src="data.img1" />
                      </div>
                      <div
                        style="{width: 25px; height: 17px; margin-bottom: 13px;  margin-top: 45px;
                          }"
                      >
                        <h4 class="text1">{{ data.xin }}</h4>
                      </div>

                      <img :src="data.img2" />
                      <p>{{ data.title }}</p>
                      <p>{{ data.form }}</p>
                      <li>
                        <router-link class="button1" :to="data.link"
                          >购买</router-link
                        >
                      </li>
                      <li>
                        <router-link class="button2" :to="data.link"
                          >进一步了解</router-link
                        >
                      </li>
                    </div>
                  </div>
                  <div v-for="data in data.data[3].data4" :key="data.lid">
                    <p>{{ data.title }}</p>
                    <div>
                      <p>{{ data.title2 }}</p>
                      <p>{{ data.title3 }}</p>
                    </div>
                  </div>
                  <div
                    v-for="data in data.data[3].zujian"
                    :key="data.uid"
                  >
                    <img :src="data.img" />
                    <div>
                      <p>
                        {{ data.tit }}
                      </p>
                      <p>
                        {{ data.tit2 }}
                      </p>
                    </div>
                  </div>
                </div>
                <!--<div class="box3">
                   <a href="#" class="button2">比较各款 iPhone 机型</a>
                  <router-link to="/iphone13pro" class="button2">选购 iPhone</router-link> 
                </div>-->
              </div>
            </div>
          </div>
        </div>

</template>

<script>
	import axios from "axios";
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/iphone";
      axios.get(url).then((res) => {
        this.data = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
<style scoped src="../assets/css/iphone.css"/>